*{
	margin: 0;
	padding: 0;
}
body{
	width: 100vw;
	background-color: #BBE2F4;
	overflow: hidden;
}
.all{
	height: 100vh;
	background: url(bg.png) no-repeat;
	background-size: 100% auto;	
	position: relative;	
	min-width: 320px;
	max-width: 414px;
}
.all .fish{
	width: 15vh;
	animation: fish 1s linear forwards;
}
@keyframes fish{
	from{transform: translate(-15vh,0px);}
	to{transform: translate(10vh,0);}
}
.text{
	width: 50vh;
	position: absolute;
	top: 10vh;
	left: calc((100vw - 50vh)/2);
	animation: text 1s linear;
}

@keyframes text{
	from{transform: translate(80vh,0);}
	to{transform: translate(0, 0);}
}
.water{
	background-image: url(water.png);
	width: 100vw;
	height: 50vh;
	position: absolute;
	bottom: 0;
}
.ice{
	width: 40vh;
	position: absolute;
	top: 30vh;
	left: calc((100vw - 40vh)/2);
	animation: ice1 1s linear,ice2 1s linear 1.2s infinite;
}
@keyframes ice1{
	from{transform: translate(0,20vh);}
	to{transform: translate(0,0);}
}
@keyframes ice2{
	0%{transform: translate(0,0);}
	50%{transform: translate(0,2vh);}
	100%{transform: translate(0,0);}
}
.fist-fish{
	width: 5vh;
	position: absolute;
	top: 55vh;
	left: -15vh;
	animation: fist-fish 5s linear infinite;
}
@keyframes fist-fish{
	from{transform: translate(0, 0);}
	to{transform: translate(100vh,0);}
}
.second-fish{
	width: 10vh;
	position: absolute;
	bottom: 5vh;
	right: -15vh;
	animation: second-fish 5s linear infinite;
}
@keyframes second-fish{
	from{transform: translate(0,0);}
	to{transform: translate(-120vw,0);}
}
.bubble{
	width: 20vw;
	position: absolute;
	bottom: 7vh;
	left: 5vw;
	opacity: 0;
	animation: bubble 1s linear .8s forwards;
}
@keyframes bubble{
	from{transform: scale(.1) translate(0,5vh);opacity: 0;}
	to{transform: scale(1) translate(0,0);opacity: 1;}
}
.weixin{
	width: 30vw;
	position: absolute;
	bottom: 10vh;
	left: 35vw;
}
.musicPlay{
	width: 10vw;
	height: 8.5vw;
	background-image: url(muted.png);
	background-size: 100%;
	position: absolute;
	top: 2.7vw;
	right: 2.7vw;
}
